<template>
	<div>
		<h1>{{this.$store.state.city}}</h1>
		<h1>{{this.$store.state.price}}</h1>
	    <h2 v-for ="item in items" @click="handleChange(item)"> {{item.name}}</h2>
	    <h3 v-for = "item in items" @click="handlePrice(item)">{{item.price}}</h3>
	    <router-link to="/" tag = 'h1'>返回</router-link>
	</div>

</template>
<script type="text/javascript">
	export default {
		data(){
			return {
              items:[
                 {'name':'苹果','price':10},
                 {'name':'香蕉','price':10},
                 {'name':'橘子','price':10},
                 {'name':'西瓜','price':10}
              ]
			}
		},
		created(){

		},
		computed:{

		},
		methods:{
          handleChange(fruit){
            // this.$store.commit('changeFruit',fruit)
            this.$store.dispatch('changeFruit',fruit)
          },
          handlePrice(fruit){
            this.$store.dispatch('changePrice',fruit)
          }
		}

	}
</script>
<style type="text/css">
	
</style>